<template>
  <div>
    <cusDialog ref="dialogRef" :title="dishesForm.id ? '修改' : '添加'" headCss="float:left;" @hideHandler="hideHandler"
      @confrim="confrimHandler" width="400px">
      <el-form ref="dishesFormRef" :model="dishesForm" label-width="80px" :rules="rules">
        <el-form-item label="菜肴名称" prop="dishName">
          <el-input v-model="dishesForm.dishName" maxlength="30" placeholder="请输入菜肴名称"></el-input>
        </el-form-item>
        <el-form-item label="菜肴编号" prop="dishCode">
          <el-input v-model="dishesForm.dishCode" maxlength="30" placeholder="请输入菜肴编号"></el-input>
        </el-form-item>
        <el-form-item label="菜肴简称">
          <el-input v-model="dishesForm.dishAbbreviation" maxlength="30" placeholder="请输入菜肴简称"></el-input>
        </el-form-item>
        <el-form-item label="菜肴类别" prop="dishTypeId">
          <el-select v-model="dishesForm.dishTypeId" placeholder="请选择菜肴类型" style="width: 100%;">
            <el-option v-for="item in dishTypeList" :key="item.id" :label="item.dishTypeName" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
    </cusDialog>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { reqAddDish, reqModifyDish } from "@/api/business/dishes";
import { ElImage } from "element-plus";
const router = useRouter();
const dialogRef = ref(null);
const dishesFormRef = ref(null);

const emits = defineEmits<{
  (event: "onInit"): void;
}>();

const formOrigin = () => ({
  dishName: "",
  dishCode: "",
  dishTypeId: "",
  dishAbbreviation: "",
  id: "",
});

const dishesForm = ref(formOrigin());

const dishTypeList = ref([]);

const rules = reactive({
  dishName: { required: true, message: "菜肴名称必填", tirgger: "blur" },
  dishCode: { required: true, message: "菜肴编号必填", tirgger: "blur" },
  dishTypeId: { required: true, message: "菜肴类别必填", tirgger: "blur" },
});

// 展示对话框
const show = (row) => {
  if (row) {
    console.log(row)
    dishesForm.value = row;
  }
  dialogRef.value.show = true;
};
// 对话框关闭重置初始数据
const hideHandler = () => {
  dishesForm.value = formOrigin();
  dishesFormRef.value.resetFields();
};
const confrimHandler = () => {
  dishesFormRef.value.validate((valid, fields) => {
    if (valid) {
      if (dishesForm.value.id) {
        getModifyDish();
      } else {
        getAddDish();
      }
    } else {
      ElMessage.info("请检查表单内容");
    }
  });
};

const getModifyDish = () => {
  reqModifyDish({
    ...dishesForm.value,
  }).then((res) => {
    if (res.code == 1) {
      ElMessage.success("修改成功");
      dialogRef.value.show = false;
      emits("onInit");
    } else {
      ElMessage.info(res.msg);
    }
  });
};

const getAddDish = () => {
  reqAddDish({
    ...dishesForm.value,
  }).then((res) => {
    if (res.code == 1) {
      ElMessage.success("添加成功");
      dialogRef.value.show = false;
      emits("onInit");
    } else {
      ElMessage.info(res.msg);
    }
  });
};

defineExpose({ show, dishTypeList });
</script>

<style lang="scss" scoped></style>